!<template>
  <el-row class="home"
          :gutter="20">
    <el-col :span="8"
            style="margin-top: 1px;">
      <el-card shadow="hover">
        <div class="user">
          <img src="../../assets/images/user.png"
               alt />
          <div class="user-info">
            <p class="name">Admin</p>
            <p class="role">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>
            上次登录时间：
            <span>2023-3-26</span>
          </p>
          <p>
            上次登录地点:
            <span>上海</span>
          </p>
        </div>
      </el-card>

      <el-card shadow="hover"
               style="margin-top: 25px; ">
        <el-table :data="tableData">
          <el-table-column v-for="(val,key) in tableLabel"
                           :key="key"
                           :prop="key"
                           :label="val"></el-table-column>
        </el-table>
      </el-card>
    </el-col>

    <el-col :span="16"
            style="margin-top: 1px;">
      <div class="num">
        <el-card :body-style="{display:'flex',padding:0}"
                 v-for="item in countData"
                 :key="item.name">
          <component class="icons"
                     :is="item.icon"
                     :style="{background:item.color}"> </component>

          <div class="detail">
            <p class="num">￥{{item.value}}</p>
            <p class="txt">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <el-card style="height: 280px;">
        <div ref="echart"
             style="height: 280px;">
        </div>
      </el-card>

      <div class="graph">
        <el-card style="height: 260px">
          <div ref="userEchart"
               style="height: 240px;">
          </div>
        </el-card>
        <el-card style="height: 260px">
          <div ref="videoEchart"
               style="height: 240px;">
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script scoped>
import { badgeProps } from "element-plus";
import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from "vue";
import * as echart from "echarts";
export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance();

    const tableLabel = {
      name: "课程",
      todayBuy: "今日购买",
      monthBuy: "本月购买",
      totalBuy: "总购买"
    }
    let tableData = ref([])
    let countData = ref([])


    const getTableList = async () => {
      let res = await proxy.$api.getTableData();
      tableData.value = res.tableData;
    }
    //获取首页count数据
    const getCountData = async () => {
      let res = await proxy.$api.getCountData();
      countData.value = res;
    };
    //获取EchartData
    const getEchartData = async () => {
      let res = await proxy.$api.getEchartData();
      let resorderData = res.orderData;
      let resuserData = res.userData;
      let resvideoData = res.videoData;

      //折线图进行渲染
      orderData.xData = resorderData.date;
      const keyArray = Object.keys(resorderData.data[0]);
      const series = [];
      keyArray.forEach((key) => {
        series.push({
          name: key,
          data: resorderData.data.map((item) => item[key]),
          type: "line",
        })
      });
      orderData.series = series;
      xOptions.xAxis.data = orderData.xData;
      xOptions.series = orderData.series;
      let hEcharts = echart.init(proxy.$refs['echart']);
      hEcharts.setOption(xOptions);


      //柱状图进行渲染
      userData.xData = resuserData.map((item) => item.date);
      userData.series = [{
        name: "新增用户",
        data: resuserData.map((item) => item.new),
        type: "bar"
      },
      {
        name: "活跃用户",
        data: resuserData.map((item) => item.active),
        type: "bar"
      }
      ];
      xOptions.xAxis.data = userData.xData;
      xOptions.series = userData.series;
      let uEcharts = echart.init(proxy.$refs['userEchart']);
      uEcharts.setOption(xOptions);

      //进行饼状图渲染
      videoData.series = [
        {
          data: resvideoData,
          type: "pie",
        }
      ];
      pieOptions.series = videoData.series;
      let vEcharts = echart.init(proxy.$refs['videoEchart']);
      vEcharts.setOption(pieOptions);
    }


    onMounted(() => {
      getTableList();
      getCountData();
      getEchartData();
    });
    //echarts 表格渲染  //饼状图的配置 
    let xOptions = reactive({
      textStyle: {
        color: "#333",
      },
      grid: {
        left: "20%",
      },
      // 提示框
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category", // 类目轴
        data: [],
        axisLine: {
          lineStyle: {
            color: "#17b3a3",
          },
        },
        axisLabel: {
          interval: 0,
          color: "#333",
        },
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
        },
      ],
      color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
      series: [],
    })
    let pieOptions = reactive({
      tooltip: {
        trigger: "item",
      },
      color: [
        "#0f78f4",
        "#dd536b",
        "#9462e5",
        "#a6a6a6",
        "#e1bb22",
        "#39c362",
        "#3ed1cf",
      ],
      series: [],
    });
    let orderData = reactive({
      xData: [],
      series: [],
    });
    let userData = reactive({
      xData: [],
      series: [],
    });
    let videoData = reactive({
      series: [],
    });


    return {
      tableData,
      tableLabel,
      countData
    };
  }
});
</script>

<style lang="less" scoped>
.home {
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }
  }
  .login-info {
    margin-top: 20px;
    p {
      margin-top: 10px;
      line-height: '30px';
      font-size: 14px;
      color: #999;
      span {
        color: #666;
        margin-left: 60px;
      }
    }
  }
  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card {
      width: 32%;
      margin-bottom: 20px;
    }
    .icons {
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }
    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num {
        font-size: 30px;
        margin-bottom: 10px;
      }
      .txt {
        font-size: 14px;
        text-align: center;
        color: #999;
      }
    }
  }
  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card {
      width: 49%;
    }
  }
}
</style>